<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John's Portfolio</title>
    <link rel="stylesheet" href="port.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <section class="header">
        <nav class="box">
            <ul class="name">
                <li>John's Portfolio</li>
            </ul>
            <ul class="components">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Contact Me</a></li>
            </ul>
            <a class="hamburger" href="#menu">
                <span class="material-icons">menu</span>
            </a>
        </nav>
    </section>

    <section class="content">
        <section class="left_section">
            <p id="para">
            <div class="l1">
                Hi, My name is <span class="myname">John Doe</span>
            </div>
            <div class="l1">and I am a passionate</div>
            <div class="l1">
                Web Developer. <span id="element"></span>
            </div>
            </p>
            <br>
            <button class="btn" onclick="window.print()">Download as PDF</button>
            <button class="btn"><a href="https://github.com/you-dont-need">Visit Github</a></button>
        </section>

        <section class="right_section">
            <img src="https://media.istockphoto.com/id/659249494/photo/working-from-home.jpg?s=612x612&w=0&k=20&c=0RPxUHQ7jDy81GqqO29BwN31D94sz_V3wW2b8kb-8bI="
                alt="Error">
        </section>
    </section>

    <hr class="divider">

    <section class="Experience">
        <div class="caption">What I have done so far</div>
        <h1 class="heading">Work Experience</h1>
        <div class="exp">
            <div class="container" id="icon">
                <img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="">
                <img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="">
                <img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="">
                <img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="">
                <img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="">
                <img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="">
            </div>
            <div class="container" id="vertical">
                <div class="one"></div>
                <div class="one"></div>
                <div class="one"></div>
                <div class="one"></div>
                <div class="one"></div>
                <div class="one"></div>
            </div>
            <div class="con" id="skills">
                <div class="units">
                    <h4>HTML Developer - <span>Pinterest (2010-2012)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
                <div class="units">
                    <h4>Web Designer - <span>Facebook (2012-2014)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
                <div class="units">
                    <h4>Frontend Developer - <span>Instagram (2014-2015)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
                <div class="units">
                    <h4>Node.js Developer - <span>Twitter (2015-2016)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
                <div class="units">
                    <h4>FullStack Developer - <span>Youtube (2016-2018)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
                <div class="units">
                    <h4>Software Developer - <span>Microsoft (2018-2023)</span></h4>
                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio
                        aliquid nesciunt perspiciatis vitae nostrum?</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer">
            <div>
                <div>John's Developer</div>
                <div>Portfolio</div>
            </div>
            <div class="service">
                <div>Home</div>
                <div>About</div>
                <div>Services</div>
                <div>Contact</div>
            </div>
        </div>
    </footer>
</body>

</html>